<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta data-vue-meta="true" data-vmid="keywords" name="keywords" content="JuLiMoll" />
		<meta data-vue-meta="true" data-vmid="description" name="description" content="JuLiMoll" />
		<title data-vue-meta="true">JuLiMoll</title>
		<link rel=icon type=image/png sizes=16x16 href="static_b/images/icon.png">
		<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.15.13/theme-chalk/index.css">
		<link rel="stylesheet" href="static_b/css/index.css?v=<%=Math.random()%>">

	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header class="header" height="60px">
					<div class="hm">
						<div class="logo">
							<div class="logo-img">
								<img :src="config.logo">
							</div>
							<div class="logo-name">
								商品管理平台
							</div>
						</div>
						<div class="navbar">
							<el-menu :default-active="activeIndex" class="el-menu-navbar" mode="horizontal" @select="handleSelect">
								<el-menu-item index="30"><i class="el-icon-chicken"></i> 商品管理</el-menu-item>
								<el-menu-item index="10"><i class="el-icon-milk-tea"></i> 品类管理</el-menu-item>
								<el-menu-item index="20"><i class="el-icon-guide"></i> 供应商管理</el-menu-item>
								<el-menu-item index="40" :disabled="!userInfo.canConfig"><i class="el-icon-setting"></i> 系统配置</el-menu-item>
							</el-menu>
						</div>
						<div class="user">
							<el-avatar style="background: #66b1ff;"><span style="font-size: 11px;">{{userInfo.nickname}}</span></el-avatar>
						</div>
					</div>

				</el-header>

				<el-main class="main-content">
					<div class="about" v-if="ctx == 'setting_idx'">
						<el-card class="box-card" :style="{marginTop: '10px'}">
							<div slot="header" class="clearfix">
								<span><i class="el-icon-setting"></i> 系统配置</span>
							</div>
							<div>
                                <template>
								<el-form :model="systemSetting" ref="systemSetting" :rules="systemSettingRules">
									<el-form-item
											label="标签配置"
											prop="tagSetting">
										<el-input
												type="textarea"
												placeholder="请输入内容"
												v-model="systemSetting.tagSetting" :rows="15">
										</el-input>
									</el-form-item>
									<el-form-item>
										<el-button type="primary" @click="onSubmitSystemSetting('systemSetting')">更新配置</el-button>
									</el-form-item>
								</el-form>
                                </template>
							</div>
						</el-card>
					</div>
					<div class="about" v-if="ctx == 'category_idx'">
						<el-card class="box-card" :style="{marginTop: '10px'}">
							<div slot="header" class="clearfix">
								<span><i class="el-icon-milk-tea"></i> 品类管理</span>
								<span style="float: right;"><el-button size="mini" type="primary" plain @click="handleShowBox('addCategory')"><i class="el-icon-plus"></i> 新增品类</el-button></span>
							</div>
							<div>
								<template>
									<el-table
											:data="categoryList"
											style="width: 100%">
										<el-table-column
												prop="id"
												label="品类ID"
												width="180">
										</el-table-column>
										<el-table-column
												prop="name"
												label="品类名称"
												width="180">
										</el-table-column>
										<el-table-column
												prop="reqTags"
												label="品类标签值" v-if="false">
										</el-table-column>
										<el-table-column
												prop="tagList"
												label="品类标签">
											<template slot-scope="scope">
												<el-tag style="margin-right: 5px;" v-for="(value,index) in scope.row.tagList">{{value.tagTypeDesc}}:{{value.tagVal}}</el-tag>
											</template>
										</el-table-column>
										<el-table-column
												fixed="right"
												label="操作"
												width="100">
											<template slot-scope="scope">
												<el-button size="mini" @click="handleEdit('editCategory', scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
											</template>
										</el-table-column>
									</el-table>
								</template>
							</div>
						</el-card>
					</div>

					<div class="about" v-if="ctx == 'supplier_idx'">
						<el-card class="box-card" :style="{marginTop: '10px'}">
							<div slot="header" class="clearfix">
								<span><i class="el-icon-guide"></i> 供应商管理</span>
								<span style="float: right;"><el-button size="mini" type="primary" plain @click="handleShowBox('addSupplier')"><i class="el-icon-plus"></i> 新增供应商</el-button></span>
							</div>
							<div>
								<template>
									<el-table
											:data="supplierList"
											style="width: 100%">
										<el-table-column
												prop="id"
												label="供应商ID"
												width="180">
										</el-table-column>
										<el-table-column
												prop="name"
												label="供应商名称"
												width="180">
										</el-table-column>
										<el-table-column
												prop="ext"
												label="供应商说明">
										</el-table-column>
										<el-table-column
												fixed="right"
												label="操作"
												width="100">
											<template slot-scope="scope">
												<el-button size="mini" @click="handleEdit('editSupplier', scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
											</template>
										</el-table-column>
									</el-table>
								</template>
							</div>
						</el-card>
					</div>

					<div class="about" v-if="ctx == 'product_idx'">
						<el-card class="box-card" :style="{marginTop: '10px'}">
							<div slot="header" class="clearfix">
								<span><i class="el-icon-chicken"></i> 商品管理</span>
								<span style="float: right;">
									<span style="margin-right: 10px;"><el-button size="mini" type="primary" plain @click="handleShowBox('addProduct')"><i class="el-icon-plus"></i> 新增商品</el-button></span>
									<el-switch
											v-model="hasBarCode"
											active-text="展示条码图">
									</el-switch>
								</span>
							</div>
							<div>
								<template>
									<el-form :inline="true" :model="productQuery" size="mini">
										<el-form-item label="ID">
											<el-input v-model="productQuery.productId" clearable placeholder="商品ID"></el-input>
										</el-form-item>
										<el-form-item label="名称">
											<el-input v-model="productQuery.productName" clearable placeholder="商品名称"></el-input>
										</el-form-item>
										<el-form-item label="条码号">
											<el-input v-model="productQuery.barCode" clearable placeholder="条码编号"></el-input>
										</el-form-item>
										<el-form-item label="品类">
											<el-select v-model="productQuery.categoryId" clearable placeholder="选择品类">
												<el-option
														v-for="category in categoryList"
														:key="category.id"
														:label="category.name"
														:value="category.id">
												</el-option>
											</el-select>
										</el-form-item>
										<el-form-item>
											<el-button type="primary" @click="onSubmitProductQuery"><i class="el-icon-search"></i> 查询</el-button>
										</el-form-item>
									</el-form>
								</template>
								<template>
									<el-table
											v-loading="loading"
											:data="productList"
											style="width: 100%">
										<el-table-column
												prop="id"
												label="商品ID"
												width="80">
										</el-table-column>
										<el-table-column
												prop="name"
												label="商品名称"
												width="180">
										</el-table-column>
										<el-table-column
												prop="supplierInfo.name"
												label="供应商信息">
										</el-table-column>
										<el-table-column
												prop="categoryInfo"
												label="品类信息">
											<template slot-scope="scope">
												{{scope.row.categoryInfo.name}}
												<br v-if="scope.row.categoryInfo.tagList" />
												<el-tag style="margin-right: 5px;" size="mini" effect="plain" v-for="(value,index) in scope.row.categoryInfo.tagList" :key="value.tagVal">{{value.tagTypeDesc}}:{{value.tagVal}}</el-tag>
											</template>
										</el-table-column>
										<el-table-column
												prop="barCodeInfo"
												label="商品条码编码">
											<template slot-scope="scope">
												<div v-if="scope.row.barCodeInfo && scope.row.barCodeInfo.barCode && !hasBarCode">{{scope.row.barCodeInfo.barCode}}</div>
												<img v-if="scope.row.barCodeInfo && scope.row.barCodeInfo.barCodeSrc && hasBarCode" :src="'data:image/png;base64,'+ scope.row.barCodeInfo.barCodeSrc" style="height: 60px;" />
											</template>
										</el-table-column>
										<el-table-column
												fixed="right"
												label="操作"
												width="200">
											<template slot-scope="scope">
												<el-button size="mini" @click="handleEdit('getProduct', scope.row)"><i class="el-icon-view"></i>查看</el-button>
												<el-button size="mini" @click="handleEdit('addProduct', scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
											</template>
										</el-table-column>
									</el-table>
									<div class="block">
										<el-pagination
												@current-change="handleCurrentChange"
												:current-page="currentPage"
												:page-size="pageSize"
												layout="total, prev, pager, next"
												:total="totalCount">
										</el-pagination>
									</div>
								</template>
							</div>
						</el-card>
					</div>

					<el-drawer
							title="新增|编辑 供应商"
							:before-close="handleClose"
							:visible.sync="supplierAddDrawer"
							direction="ltr"
							wrapperClosable="false"
					>
						<div class="add-drawer-content">
							<el-form label-position="right" label-width="80px" :model="supplierDetail" ref="supplierDetail" :rules="supplierRules">
								<el-form-item label="编号" prop="id">
									<el-input v-model="supplierDetail.id" :disabled="true"></el-input>
								</el-form-item>
								<el-form-item label="名称" prop="name">
									<el-input v-model="supplierDetail.name"></el-input>
								</el-form-item>
								<el-form-item label="说明" prop="ext">
									<el-input v-model="supplierDetail.ext"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="onSubmitSupplier('supplierDetail')">保存提交</el-button>
								</el-form-item>
							</el-form>
						</div>
					</el-drawer>

					<el-drawer
							title="新增|编辑 品类"
							:before-close="handleClose"
							:visible.sync="categoryAddDrawer"
							direction="ltr"
					>
						<div class="add-drawer-content">
							<el-form label-position="right" label-width="80px" :model="categoryDetail" ref="categoryDetail" :rules="categoryRules">
								<el-form-item label="编号" prop="id">
									<el-input v-model="categoryDetail.id" :disabled="true"></el-input>
								</el-form-item>
								<el-form-item label="名称" prop="name">
									<el-input v-model="categoryDetail.name"></el-input>
								</el-form-item>
								<el-form-item label="标签" prop="ext">
									<el-select v-model="categoryDetail.reqTags" multiple placeholder="请选择标签">
										<el-option
												v-for="item in categoryOptions"
												:key="item.tagVal"
												:label="item.tagTypeDesc"
												:value="item.tagVal">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="onSubmitCategory('categoryDetail')">保存提交</el-button>
								</el-form-item>
							</el-form>
						</div>
					</el-drawer>

					<el-drawer
							title="商品详情"
							:visible.sync="productDetailDrawer"
							direction="ltr"
							:with-header="false"
							size="60%"
					>
						<div class="add-drawer-content">
							<el-descriptions direction="vertical" :column="4" border>
								<el-descriptions-item label="商品编号">{{productDetail.id}}</el-descriptions-item>
								<el-descriptions-item label="商品名称">{{productDetail.name}}</el-descriptions-item>
								<el-descriptions-item label="创建时间">{{productDetail.createTimeStr}}</el-descriptions-item>
								<el-descriptions-item label="当前库存">{{productDetail.stock}}</el-descriptions-item>
                                <el-descriptions-item label="进货价">{{productDetail.price}}</el-descriptions-item>
                                <el-descriptions-item label="售卖价">{{productDetail.showPrice}}</el-descriptions-item>
								<el-descriptions-item label="品类信息">
									<div v-if="productDetail.categoryInfo">
										{{productDetail.categoryInfo.id}} - {{productDetail.categoryInfo.name}}
									</div>
								</el-descriptions-item>
								<el-descriptions-item label="供应商信息">
									<div v-if="productDetail.supplierInfo">
										{{productDetail.supplierInfo.id}} - {{productDetail.supplierInfo.name}}
									</div>
								</el-descriptions-item>
								<el-descriptions-item label="条码编号" :span="2">
									<div v-if="productDetail.barCodeInfo" style="width: 100%; text-align: center;">
										<img style="height: 60px" v-if="productDetail.barCodeInfo.barCodeSrc" :src="'data:image/png;base64,'+ productDetail.barCodeInfo.barCodeSrc"/>
										<br>
										{{productDetail.barCodeInfo.barCode}}
									</div>
								</el-descriptions-item>
								<el-descriptions-item label="商品图片">
									<img style="width: 200px;" :src="productDetail.img">
								</el-descriptions-item>
								<el-descriptions-item label="其它说明">
									{{productDetail.ext}}
								</el-descriptions-item>
							</el-descriptions>
							<el-card class="box-card" style="margin-top: 10px;margin-bottom: 10px;">
								<div slot="header" class="clearfix">
									<span><i class="el-icon-coordinate"></i> 库存操作历史</span>
									<span style="float: right;">
										<el-input-number v-model="changeStockNum" size="mini" controls-position="right" :min="1" label="输入库存数"></el-input-number>
										<el-popconfirm title="确定增加吗？" @confirm="handleStockBox('plusStock', productDetail.id)">
											<el-button size="mini" slot="reference"><i class="el-icon-plus"></i>库存</el-button>
										</el-popconfirm>
										<el-popconfirm title="确定扣减吗？" @confirm="handleStockBox('minusStock', productDetail.id)">
											<el-button size="mini" slot="reference" :disabled="productDetail.stock <=0"><i class="el-icon-minus"></i>库存</el-button>
										</el-popconfirm>
									</span>
								</div>
								<template>
									<el-table
											:data="productStockRecordList"
											style="width: 100%">
										<el-table-column
												prop="id"
												label="操作编号" width="80">
										</el-table-column>
										<el-table-column
												prop="opTypeStr"
												label="操作类型" width="100">
										</el-table-column>
										<el-table-column
												prop="stock"
												label="库存" width="150">
										</el-table-column>
										<el-table-column
												prop="opUser"
												label="操作人" width="80">
										</el-table-column>
										<el-table-column
												prop="createTimeStr"
												label="操作时间">
										</el-table-column>
										<el-table-column
												fixed="right"
												label="操作" width="80">
											<template slot-scope="scope">
												<el-popconfirm title="确定撤销吗？" @confirm="handleStockBox('removeStockRecord', scope.row.id)">
													<el-button size="mini" slot="reference"><i class="el-icon-zoom-out"></i></el-button>
												</el-popconfirm>
											</template>
										</el-table-column>
									</el-table>
									<el-pagination
											small
											layout="prev, pager, next"
											@current-change="handleStockRecordCurrentChange"
											:current-page="psrCurrentPage"
											:page-size="psrPageSize"
											:total="psrTotalCount">
									</el-pagination>
								</template>
							</el-card>
						</div>
					</el-drawer>

					<el-drawer
							title="新增|编辑 商品"
							:before-close="handleClose"
							:visible.sync="productAddDrawer"
							direction="ltr"
							:wrapperClosable="false"
							size="50%"
					>
						<div class="add-drawer-content">
							<el-form label-position="right" label-width="80px" :model="productAddInfo" ref="productAddInfo" :rules="productRules" size="mini">
								<el-form-item label="编号" prop="id">
									<el-input v-model="productAddInfo.id" :disabled="true"></el-input>
								</el-form-item>
								<el-form-item label="名称" prop="name">
									<el-input v-model="productAddInfo.name"></el-input>
								</el-form-item>
                                <el-form-item label="条码编号" prop="barCode">
                                    <el-input v-model="productAddInfo.barCode"></el-input>
                                </el-form-item>
                                <el-form-item label="进货价" prop="price">
                                    <el-input v-model="productAddInfo.price"></el-input>
                                </el-form-item>
								<el-form-item label="售卖价" prop="showPrice">
									<el-input v-model="productAddInfo.showPrice"></el-input>
								</el-form-item>
								<el-form-item label="供应商" prop="supplierId">
									<el-select v-model="productAddInfo.supplierId" placeholder="请选择供应商">
										<el-option
												v-for="item in supplierList"
												:key="item.id"
												:label="item.name"
												:value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="品类" prop="categoryId">
									<el-select v-model="productAddInfo.categoryId" placeholder="请选择品类">
										<el-option
												v-for="item in categoryList"
												:key="item.id"
												:label="item.name"
												:value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="图片" prop="img">
									<el-upload
											:with-credentials="true"
											action="/api/upload"
											list-type="picture-card"
											accept="image/jpeg,image/png"
											:multiple="false"
											:limit="1"
											:file-list="fileList"
											:on-preview="handlePictureCardPreview"
											:on-success="handleAvatarSuccess"
											:on-remove="handleRemove">
										<i class="el-icon-plus"></i>
									</el-upload>
									<el-dialog :visible.sync="dialogVisible">
										<img width="100%" :src="dialogImageUrl" alt="">
									</el-dialog>
								</el-form-item>
								<el-form-item label="其它说明" prop="ext">
									<el-input type="textarea" v-model="productAddInfo.ext"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="onSubmitProduct('productAddInfo')">保存提交</el-button>
								</el-form-item>
							</el-form>
						</div>
					</el-drawer>

				</el-main>
				<div class="copyright">
					© {{new Date().getFullYear()}} Powered by www.julimoll.fun
					<span>皖ICP备18015774号-1</span>
				</div>
			</el-container>
		</div>
		<script type="text/javascript">
			function detectIE() {
				var ua = window.navigator.userAgent;
				var msie = ua.indexOf('MSIE ');
				if (msie > 0) {
					// IE 10 or older => return version number
					return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
				}

				var trident = ua.indexOf('Trident/');
				if (trident > 0) {
					// IE 11 => return version number
					var rv = ua.indexOf('rv:');
					return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
				}

				var edge = ua.indexOf('Edge/');
				if (edge > 0) {
					// Edge (IE 12+) => return version number
					return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
				}

				// other browser
				return false;
			}
			if (detectIE()) {
				document.getElementById("app").innerHTML =
					"<div style='text-align:center;'><h1>这是一个很有意思的网站!</h1> <h2> 请使用谷歌浏览器或右键选择极速模式， 总之放弃IE浏览器! </h2></div>";
			}
		</script>
	</body>

	<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
	<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
	<script src="https://cdn.bootcss.com/element-ui/2.15.13/index.js"></script>
	<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.simple.min.js"></script>
	<script src="static_b/js/index.js?v=<%=Math.random()%>"></script>

</html>
